<template>
  <div>
    <div>
      <br>
      <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-row>
    </div>
    <div>
      <div class="row">
        <Banner></Banner>
      </div>
      <div class="row">
        <div class="col-xs-offset-2">
          <div class="list-group">
            <!--原始html中我们使用a标签实现页面跳转-->
            <!--<a class="list-group-item active" href="./about.html">About</a>-->
            <!--<a class="list-group-item active" href="./home.html">Home</a>-->
            <!--Vue中借助router-link标签实现路由切换-->
            <router-link class="list-group-item" active-class="active" to="/about">
              About
            </router-link>
            <router-link class="list-group-item" active-class="active" to="/home">
              Home
            </router-link>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!--指定组件的呈现位置-->
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <!--<div>-->
    <!--  <div class="row">-->
    <!--    <div class="col-xs-offset-2 col-xs-8">-->
    <!--      <div class="page-header"><h2>Vue Router Demo</h2></div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--  <div class="row">-->
    <!--    <div class="col-xs-2 col-xs-offset-2">-->
    <!--      <div class="list-group">-->
    <!--        &lt;!&ndash; 原始html中我们使用a标签实现页面跳转 &ndash;&gt;-->
    <!--        &lt;!&ndash; <a class="list-group-item active" href="./about.html">About</a>-->
    <!--        <a class="list-group-item" href="./home.html">Home</a> &ndash;&gt;-->

    <!--        &lt;!&ndash; Vue中借助router-link标签实现路由的切换 &ndash;&gt;-->
    <!--        <router-link class="list-group-item" active-class="active" to="/about">-->
    <!--          About-->
    <!--        </router-link>-->
    <!--        <router-link class="list-group-item" active-class="active" to="/home2">-->
    <!--          Home-->
    <!--        </router-link>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="col-xs-6">-->
    <!--      <div class="panel">-->
    <!--        <div class="panel-body">-->
    <!--          &lt;!&ndash; 指定组件的呈现位置 &ndash;&gt;-->
    <!--          <router-view></router-view>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--</div>-->
    <Count></Count>
    <hr>
    <Person></Person>
    <hr>
    <div class="container">
      <!--<Category title="美食">-->
      <!--  <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">-->
      <!--</Category>-->
      <!--<Category title="游戏">-->
      <!--  <ul>-->
      <!--    <li v-for="(g,index) in games" :key="index">{{ g }}</li>-->
      <!--  </ul>-->
      <!--</Category>-->
      <!--<Category title="电影">-->
      <!--  <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>-->
      <!--</Category>-->

      <!--<Category title="美食">-->
      <!--  <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">-->
      <!--  <a slot="footer" href="http://www.atguigu.com">更多美食</a>-->
      <!--</Category>-->
      <!--<Category title="游戏">-->
      <!--  <ul>-->
      <!--    <li v-for="(g,index) in games" :key="index">{{ g }}</li>-->
      <!--  </ul>-->
      <!--  <div class="foot" slot="footer">-->
      <!--    <a href="http://www.atguigu.com">单机游戏</a>-->
      <!--    <a href="http://www.atguigu.com">网络游戏</a>-->
      <!--  </div>-->
      <!--</Category>-->
      <!--<Category title="电影">-->
      <!--  <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>-->
      <!--  <template v-slot:footer>-->
      <!--    <div class="foot">-->
      <!--      <a href="http://www.atguigu.com">经典</a>-->
      <!--      <a href="http://www.atguigu.com">热门</a>-->
      <!--      <a href="http://www.atguigu.com">推荐</a>-->
      <!--    </div>-->
      <!--    <h4>欢迎前来观影</h4>-->
      <!--  </template>-->
      <!--</Category>-->

      <Category title="游戏">
        <template slot-scope="jojo">
          <ul>
            <li v-for="(g, index) in jojo.games" :key="index">{{g}}</li>
          </ul>
        </template>
      </Category>
      <Category title="游戏">
        <template slot-scope="jojo">
          <ol>
            <li v-for="(g, index) in jojo.games" :key="index">{{g}}</li>
          </ol>
        </template>
      </Category>
      <Category title="游戏">
        <template slot-scope="jojo">
          <h4 v-for="(g,index) in jojo.games" :key="index">{{g}}</h4>
        </template>
      </Category>
    </div>
    <hr>
    <Search></Search>
    <hr>
    <List></List>
    <hr>
    <MyAnimation></MyAnimation>
    <hr>
    <MyTransition></MyTransition>
    <hr>
    <MyTransitionGroup></MyTransitionGroup>
    <hr>
    <ThirdPartAnimation></ThirdPartAnimation>
    <hr>
    <XiaoXiDeDingYueYuFaBuSchool></XiaoXiDeDingYueYuFaBuSchool>
    <hr>
    <XiaoXiDeDingYueYuFaBuStudent></XiaoXiDeDingYueYuFaBuStudent>
    <hr>
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader @addTodo="addTodo"></MyHeader>
        <MyList :todos="todos"/>
        <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
      </div>
    </div>
    <hr>
    <QuanJuShiJianZongXianSchool></QuanJuShiJianZongXianSchool>
    <hr>
    <QuanJuShiJianZongXianStudent></QuanJuShiJianZongXianStudent>
    <hr>
    <ZiDingYiShiJianJieBangStudent @jojo="getStudentName"/>
    <hr>
    <!--通过父组件给子组件传递函数类型的props实现子给父传递数据-->
    <ZiDingYiShiJianBangDingSchool :getSchoolName="getSchoolName"/>
    <hr>
    <!--通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第一种写法，使用@或者v-on)-->
    <!--<ZiDingYiShiJianBangDingStudent @jojo="getStudentName"/>-->
    <!--通过父组件给子组件绑定一个自定义事件实现子给父传递数据(第二种写法，使用ref)-->
    <ZiDingYiShiJianBangDingStudent ref="student"/>
    <hr>
    <WebStorage></WebStorage>
    <hr>
    <!--<div class="todo-container">-->
    <!--  <div class="todo-wrap">-->
    <!--    <MyHeader :add-todo="addTodo"></MyHeader>-->
    <!--    <MyList :todos="todos" :checkTodo="checkTodo" :deteteTodo="deleteTodo"/>-->
    <!--    <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>-->
    <!--  </div>-->
    <!--</div>-->

    <!--<div class="todo-container">-->
    <!--  <div class="todo-wrap">-->
    <!--    <MyHeader @addTodo="addTodo"></MyHeader>-->
    <!--    <MyList :todos="todos" :checkTodo="checkTodo" :deteteTodo="deleteTodo"/>-->
    <!--    <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>-->
    <!--  </div>-->
    <!--</div>-->
    <ScopedSchool></ScopedSchool>
    <hr>
    <ScopedStudent></ScopedStudent>
    <hr>
    <PluginSchool></PluginSchool>
    <hr>
    <PluginStudent></PluginStudent>
    <hr>
    <MixinHunRuSchool></MixinHunRuSchool>
    <hr>
    <MixinHunRuStudent></MixinHunRuStudent>
    <hr>
    <PropsPeiZhiXiang name="JOJO" sex="男同" :age="20"/>
    <hr>
    <RefShuXing></RefShuXing>
    <hr>
    <School></School>
    <hr>
    <Student></Student>
    <hr>
    <ZongJieShengMingZhouQi></ZongJieShengMingZhouQi>
    <hr>
    <FenXiShengMingZhouQi></FenXiShengMingZhouQi>
    <hr>
    <YinChuShengMingZhouQi></YinChuShengMingZhouQi>
    <hr>
    <ZiDingYiZhiLing></ZiDingYiZhiLing>
    <hr>
    <NeiZhiZhiLing></NeiZhiZhiLing>
    <hr>
    <GuoLvQi></GuoLvQi>
    <hr>
    <ShouJiBiaoDanShuJu></ShouJiBiaoDanShuJu>
    <hr>
    <ShuJuJianShi></ShuJuJianShi>
    <hr>
    <LieBiaoPaiXu></LieBiaoPaiXu>
    <hr>
    <LieBiaoGuoLv></LieBiaoGuoLv>
    <hr>
    <KeyDeZuoYongHeYuanLi></KeyDeZuoYongHeYuanLi>
    <hr>
    <JiBenLieBiao></JiBenLieBiao>
    <hr>
    <TiaoJianXuanRan></TiaoJianXuanRan>
    <hr>
    <BangDingYangShi></BangDingYangShi>
    <hr>
    <ShenDuJianShi></ShenDuJianShi>
    <hr>
    <JianShiShuXingDeJiBenYongFa></JianShiShuXingDeJiBenYongFa>
    <hr>
    <JiSuanShuXing></JiSuanShuXing>
    <hr>
    <JianPanShiJian></JianPanShiJian>
    <hr>
    <ShiJianXiuShiFu></ShiJianXiuShiFu>
    <hr>
    <ShiJianDeJiBenYongFa></ShiJianDeJiBenYongFa>
    <hr>
    <MVVM></MVVM>
    <hr>
    <ShuJuBangDing></ShuJuBangDing>
    <hr>
    <MoBanYuFa></MoBanYuFa>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
import ShuJuBangDing from "./views/ShuJuBangDing";
import MoBanYuFa from "./views/MoBanYuFa";
import MVVM from "./views/MVVM";
import ShiJianDeJiBenYongFa from "./views/ShiJianDeJiBenYongFa";
import ShiJianXiuShiFu from "./views/ShiJianXiuShiFu";
import JianPanShiJian from "./views/JianPanShiJian";
import JiSuanShuXing from "./views/JiSuanShuXing";
import JianShiShuXingDeJiBenYongFa from "./views/JianShiShuXingDeJiBenYongFa";
import ShenDuJianShi from "./views/ShenDuJianShi";
import BangDingYangShi from "./views/BangDingYangShi";
import TiaoJianXuanRan from "./views/TiaoJianXuanRan";
import JiBenLieBiao from "./views/JiBenLieBiao";
import KeyDeZuoYongHeYuanLi from "./views/KeyDeZuoYongHeYuanLi";
import LieBiaoGuoLv from "./views/LieBiaoGuoLv";
import LieBiaoPaiXu from "./views/LieBiaoPaiXu";
import ShuJuJianShi from "./views/ShuJuJianShi";
import ShouJiBiaoDanShuJu from "./views/ShouJiBiaoDanShuJu";
import GuoLvQi from "./views/GuoLvQi";
import NeiZhiZhiLing from "./views/NeiZhiZhiLing";
import ZiDingYiZhiLing from "./views/ZiDingYiZhiLing";
import YinChuShengMingZhouQi from "./views/YinChuShengMingZhouQi";
import FenXiShengMingZhouQi from "./views/FenXiShengMingZhouQi";
import ZongJieShengMingZhouQi from "./views/ZongJieShengMingZhouQi";
import School from "./views/School";
import Student from "./views/Student";
import RefShuXing from "./views/RefShuXing";
import PropsPeiZhiXiang from "./views/PropsPeiZhiXiang";
import MixinHunRuSchool from "./views/MixinHunRuSchool";
import MixinHunRuStudent from "./views/MixinHunRuStudent";
import PluginSchool from "./views/PluginSchool";
import PluginStudent from "./views/PluginStudent";
import ScopedSchool from "./views/ScopedSchool";
import ScopedStudent from "./views/ScopedStudent";
import MyHeader from "./views/MyHeader";
import MyList from "./views/MyList";
import MyFooter from "./views/MyFooter";
import Home from "./pages/Home";
import WebStorage from "./views/WebStorage";
import ZiDingYiShiJianBangDingSchool from "./views/ZiDingYiShiJianBangDingSchool";
import ZiDingYiShiJianBangDingStudent from "./views/ZiDingYiShiJianBangDingStudent";
import ZiDingYiShiJianJieBangStudent from "./views/ZiDingYiShiJianJieBangStudent";
import QuanJuShiJianZongXianSchool from "./views/QuanJuShiJianZongXianSchool";
import QuanJuShiJianZongXianStudent from "./views/QuanJuShiJianZongXianStudent";
import XiaoXiDeDingYueYuFaBuSchool from "./views/XiaoXiDeDingYueYuFaBuSchool";
import XiaoXiDeDingYueYuFaBuStudent from "./views/XiaoXiDeDingYueYuFaBuStudent";
import MyAnimation from "./views/MyAnimation";
import MyTransition from "./views/MyTransition";
import MyTransitionGroup from "./views/MyTransitionGroup";
import ThirdPartAnimation from "./views/ThirdPartAnimation";
import Search from "./views/Search";
import List from "./views/List";
import Category from "./views/Category";
import Count from "./views/Count";
import Person from "./views/Person";
import Banner from "./views/Banner";

export default {
  name: 'App',
  components: {
    Banner,
    Person,
    Count,
    Category,
    List,
    Search,
    ThirdPartAnimation,
    MyTransitionGroup,
    MyTransition,
    MyAnimation,
    XiaoXiDeDingYueYuFaBuStudent,
    XiaoXiDeDingYueYuFaBuSchool,
    QuanJuShiJianZongXianStudent,
    QuanJuShiJianZongXianSchool,
    ZiDingYiShiJianJieBangStudent,
    ZiDingYiShiJianBangDingStudent,
    ZiDingYiShiJianBangDingSchool,
    WebStorage,
    Home,
    MyFooter,
    MyList,
    MyHeader,
    ScopedStudent,
    ScopedSchool,
    PluginStudent,
    PluginSchool,
    MixinHunRuStudent,
    MixinHunRuSchool,
    PropsPeiZhiXiang,
    RefShuXing,
    Student,
    School,
    ZongJieShengMingZhouQi,
    FenXiShengMingZhouQi,
    YinChuShengMingZhouQi,
    ZiDingYiZhiLing,
    NeiZhiZhiLing,
    GuoLvQi,
    ShouJiBiaoDanShuJu,
    ShuJuJianShi,
    LieBiaoPaiXu,
    LieBiaoGuoLv,
    KeyDeZuoYongHeYuanLi,
    JiBenLieBiao,
    TiaoJianXuanRan,
    BangDingYangShi,
    ShenDuJianShi,
    JianShiShuXingDeJiBenYongFa,
    JiSuanShuXing,
    JianPanShiJian,
    ShiJianXiuShiFu,
    ShiJianDeJiBenYongFa,
    MVVM,
    MoBanYuFa,
    ShuJuBangDing,
  },
  data() {
    return {
      // todos:[
      //   {id:'001',title:'抽烟',done:false},
      //   {id:'002',title:'喝酒',done:false},
      //   {id:'003',title:'烫头',done:false},
      // ]
      //若localStorage中存有‘todos’则从localStorage中取出，否则初始为空
      todos: JSON.parse(localStorage.getItem('todos')) || [],
      games: ['植物大战僵尸', '红色警戒', '空洞骑士', '王国']
    }
  },
  methods: {
    //添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj)
    },
    //勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done
      })
    },
    //删除一个todo
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    //全选或取消勾选
    checkAllTodo(done) {
      this.todos.forEach(todo => todo.done = done)
    },
    //删除已完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter(todo => !todo.done)
    },
    //更新一个todo
    updateTodo(id, title) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.title = title
      })
    },
    getSchoolName(name) {
      alert("已收到学校名称: " + name)
      console.log("已收到学校名称: " + name)
    },
    getStudentName(name) {
      alert("已收到学生的姓名: " + name)
      console.log("已收到学生的姓名: " + name)
    }
  },
  watch: {
    todos: {
      //由于todos是对象数组，所以必须开启深度监视才能发现数组中对象的变化
      deep: true,
      handler(value) {
        localStorage.setItem('todos', JSON.stringify(value))
      }
    }
  },
  mounted() {
    this.$refs.student.$on('jojo', this.getStudentName)
    //this.$bus.$on('checkTodo', this.checkTodo)
    this.pubId = pubsub.subscribe('checkTodo', this.checkTodo)
    this.$bus.$on('deleteTodo', this.deleteTodo)
    this.$bus.$on('updateTodo', this.updateTodo)
  },
  beforeDestroy() {
    //this.$bus.$off(['checkTodo', 'deleteTodo'])
    pubsub.unsubscribe(this.pubId)
    this.$bus.$off(['deleteTodo'])
    this.$bus.$off(['updateTodo'])
  }
}
</script>

<style>
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.container, .foot {
  display: flex;
  justify-content: space-around;
}
h4{
  text-align: center;
}
</style>
